<template>
	<view style="background-color: #f6f6f6;">
		<!-- 自定义导航 -->
		<uni-nav-bar :border="false" backgroundColor="#f6f6f6" @clickRight="toSettings()" statusBar>
			<uni-icons slot="right" custom-prefix="iconfont" type="icon-shezhi" size="26"></uni-icons>
		</uni-nav-bar>
		<view class="container">
			<!-- 头部 -->
			<view>
				<!-- 未登录状态 -->
				<view v-if="!isLogin" class="unlogin">
					<view>欢迎使用洁论小说</view>
					<view @click="toLogin()">马上登录</view>
				</view>
				<!-- 已登陆状态 -->
				<view v-else>
					<uni-list :border="false">
						<uni-list-item showArrow style="background-color: #f6f6f6;" >
							<view slot="body" class="user">
								<image :src="user.avatar" mode="widthFix"></image>
								<view>
									<view>{{user.uname}}</view>
									<view>介绍一下自己吧</view>
								</view>
							</view>
						</uni-list-item>
					</uni-list>
				</view>
			</view>
			<!-- 头部结束 -->
			<!-- VIP -->
			<view class="vip">
				<view>
					<view>VIP</view>
					<view>尊享无限时免广告看书、听书</view>
				</view>
				<view>￥6.00开通</view>
			</view>
			<!-- VIP结束 -->
			<!-- 金币详情 -->
			<view class="card">
				<view>
					<view class="cell">
						<view>{{isLogin?user.integral:0}}</view>
						<view>金币余额(币)</view>
					</view>
					<view class="cell">
						<view>0</view>
						<view>现金余额(元)</view>
					</view>
					<view @click="switchTo()">
						<image src="../../static/coin.png" mode="widthFix"></image>
						<view>去领钱</view>
					</view>
				</view>
				<view>
					<view>提现兑换</view>
					<view>邀请好友</view>
					<view>填邀请码</view>
				</view>
			</view>
			<!-- 常用功能 -->
			<view class="list">
				<view>常用功能</view>
				<uni-grid :column="3" :showBorder="false" :square="false" @change="navigatorTo($event)">
					<uni-grid-item :index="2">
						<uni-icons custom-prefix="iconfont" type="icon-liulan" size="26"></uni-icons>
						<text>浏览历史</text>
					</uni-grid-item>
					<uni-grid-item>
						<uni-icons custom-prefix="iconfont" type="icon-xiaoxi" size="26"></uni-icons>
						<text>我的消息</text>
					</uni-grid-item>
					<uni-grid-item>
						<uni-icons custom-prefix="iconfont" type="icon-guanzhu" size="26"></uni-icons>
						<text>我的关注</text>
					</uni-grid-item>
					<uni-grid-item>
						<uni-icons custom-prefix="iconfont" type="icon-like" size="26"></uni-icons>
						<text>阅读偏好</text>
					</uni-grid-item>
					<uni-grid-item :index="1">
						<uni-icons custom-prefix="iconfont" type="icon-download" size="26"></uni-icons>
						<text>我的下载</text>
					</uni-grid-item>
					<uni-grid-item>
						<uni-icons custom-prefix="iconfont" type="icon-tobeauthor" size="26"></uni-icons>
						<text>成为作家</text>
					</uni-grid-item>
					<uni-grid-item>
						<uni-icons custom-prefix="iconfont" type="icon-dingdan" size="26"></uni-icons>
						<text>订单管理</text>
					</uni-grid-item>
					<uni-grid-item>
						<uni-icons custom-prefix="iconfont" type="icon-xiaoheiwu" size="26"></uni-icons>
						<text>小黑屋</text>
					</uni-grid-item>
					<uni-grid-item>
						<uni-icons custom-prefix="iconfont" type="icon-fankui" size="26"></uni-icons>
						<text>反馈与帮助</text>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
export default {
	data() {
		return {
		};
	},
	computed:{
		...mapState({
			user:state=>state.user,
			isLogin: state => state.isLogin,
		})
	},
	methods: {
		// 我的下载
		navigatorTo(e) {
			// console.log(e);
			if (e.detail.index == 2) {
				uni.navigateTo({
					url: '/pages/browse/browse'
				});
			}
			if (e.detail.index == 1) {
				uni.navigateTo({
					url: '/pages/download/download'
				});
			}
		},
		// 登录
		toLogin(){
			uni.navigateTo({
				url:'/pages/login/login'
			})
		},
		// 跳转到tab页 fuli
		switchTo(){
			// console.log(111)
			uni.switchTab({
				url:'../fuli/fuli'
			})
		},
		// 跳转设置页面
		toSettings(){
			uni.navigateTo({
				url: '../settings/settings',
			});
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #f6f6f6;
}
.container {
	padding: 0 40rpx;
}
// 宫格
/deep/.uni-grid-item__box {
	justify-content: center;
	align-items: center;
}
// 未登录
.unlogin {
	// padding: 20rpx 0;
	margin-top: 10rpx;
	> view:first-child {
		font-size: 50rpx;
		font-weight: 600;
	}
	> view:last-child {
		padding: 10rpx 16rpx;
		margin: 40rpx 0;
		width: 200rpx;
		border-radius: 44rpx;
		text-align: center;
		background-color: #ff604f;
		color: #fff;
	}
}
// 用户信息
.user{
	display: flex;
	align-items: center;
	image{
		width: 100rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	>view{
		>view:first-child{
			font-weight: 600;
			font-size: 32rpx;
		}
		>view:last-child{
			color: #999;
			font-size: 22rpx;
		}
	}
}
// vip
.vip {
	padding: 30rpx;
	margin-bottom: 20rpx;
	border-radius: 10rpx;
	background-color: #afb2b7;
	display: flex;
	justify-content: space-between;
	align-items: center;
	> view:first-child {
		> view:first-child {
			color: #838790;
			font-size: 36rpx;
			font-weight: 600;
			margin-bottom: 10rpx;
		}
		> view:last-child {
			color: #fff;
			font-size: 28rpx;
		}
	}
	> view:last-child {
		font-weight: 600;
		color: #fff;
		background-color: #8c9099;
		padding: 10rpx 20rpx;
		border-radius: 32rpx;
	}
}
.card {
	padding: 30rpx;
	margin-bottom: 20rpx;
	background-color: #fff;
	border-radius: 10rpx;
	> view:first-child {
		display: flex;
		border-bottom: 1rpx solid #ccc;
		justify-content: space-between;
		align-items: flex-start;
		.cell {
			> view {
				margin-bottom: 18rpx;
			}
			> view:first-child {
				font-weight: 600;
				font-size: 30rpx;
			}
			> view:last-child {
				color: #999;
				font-size: 26rpx;
			}
		}
		> view:last-child {
			margin-top: 20rpx;
			padding: 10rpx 20rpx;
			border-radius: 34rpx;
			background-color: #fdf8e5;
			display: flex;
			justify-content: space-between;
			align-items: center;
			> image {
				width: 40rpx;
			}
			> view {
				color: #fec660;
			}
		}
	}
	> view:last-child {
		display: flex;
		justify-content: space-between;
		// padding: 18rpx;
		> view {
			margin-top: 30rpx;
			margin-bottom: 10rpx;
			padding: 0 40rpx;
			border-right: 1px solid #ccc;
		}
		> view:last-child {
			border: 0;
		}
	}
}
// 常用功能
.list {
	margin-bottom: 20rpx;
	padding: 20rpx 0;
	background-color: #fff;
	border-radius: 10rpx;
	> view:first-child {
		margin-left: 30rpx;
		margin-top: 10rpx;
		font-weight: 600;
		font-size: 34rpx;
	}
	text {
		// margin: 20rpx 0;
	}
	/deep/.uni-grid {
		justify-content: space-around;
		.uni-grid-item {
			width: 180rpx !important;
			height: 180rpx;
		}
	}
}
</style>
